<template>
 <div class="container" >
    <nav class="db-tr">
        <div class="db-td">
            <span>品牌编码:</span>
            <input type="text" v-model="brandId" class="form-control">
        </div>

        <div class="db-td">
            <span>品牌名称:</span>
            <input type="text" v-model="brandName" class="form-control">
        </div>

        <div class="db-td">
            <input type="button" class="btn btn-lg" value="添加" @click="add">
        </div>

        <div class="db-td">
            <span>KeyWords</span>
            <input type="text" v-model="KeyWords" class="form-control">
        </div>
    </nav>

    <table class="table table-hover">
        <thead>
            <tr>
                <th>
                    品牌编码
                </th>
                <th>
                    品牌名称
                </th>
                <th>
                    时间
                </th>
                <th>
                    操作
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item) in list" :key="item.brandId">
                <td>
                    {{ item.brandId }}
                </td>
                <td>
                    {{ item.brandName }}
                </td>
                <td>
                    {{ dateFormat(item.cTime) }}
                </td>
                <td>
                    <a class="btn btn-lg" @click.prevent="del(item.brandId)">删除</a>
                    <a class="btn btn-lg" @click.prevent="upd(item.brandId)">修改</a>
                </td>
            </tr>
        </tbody>
    </table>
 </div>
</template>
<script>
    export default {
        name: '',
        data: function(){
            return {
                brandId:'',
                brandName:'',
                KeyWords:'',
                list:[
                    {brandId:'1',brandName:'别克汽车',cTime:new Date()},
                    {brandId:'2',brandName:'本田汽车',cTime:new Date()}
                ],
                index:3
            }
        },
        methods:{
            add(){
                this.list.push({brandId:this.index++,brandName:this.brandName,cTime:new Date()})
            },
            del(brandId){
                var that = this;
                this.list.some(function(item,index){
                    if(item.brandId === brandId){
                        that.list.splice(index,1)
                    }
                });
            },
            upd(brandId){
                var that = this;
                this.list.some(function(item,index){
                    if(item.brandId === brandId){
                        that.list.splice(index,1,{brandId:item.brandId,brandName:that.brandName,cTime:new Date()})
                    }
                });
            },
            dateFormat(data){
                var mData = new Date(data)
                var y = mData.getFullYear()
                var m = (mData.getMonth() + 1).toString();
                var d = mData.getDate().toString();
                //es6 中模板字符串
                return `${y}-${m}-${d}`;
            }
        }
    }
</script>
<style>
    html,
    body, 
    #app{
        height: 100%;
    }
</style>
<style scoped>
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center;  */
        width: 100%;
        height: 100%;
    }
    .table{
        width: 100%;
        flex-grow: auto;
    }
    .table > thead,
    .table > tbody{
        width: 100%;
        /* display: block;
        align-content: center; */
    }
    .db-tr{
        width: 100%;
        flex-basis: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .db-td{
        padding-left: 10px;
    }
    .second{
        background-color: aqua;
    }
    .form-control{
        display: inline-block;
        width: 75%;
        margin-left: autoe;
    }
    
</style>